<template>
    <div>
        <Tabs :value="currentTab" @on-click="changeTab" class="environ-tab">
            <TabPane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name">
                <component :is="tab.component" :prjId="prjId"></component>
            </TabPane>
            <div slot="extra">
                <slot></slot>
            </div>
        </Tabs>
    </div>
</template>
<script>
import environManage from '../environ/environManage.vue';
import physicalList from './physicalList.vue';
import router from './router.vue';
export default {
    name: 'DeviceManage',
    props: ['prjId'],
    components: { environManage, physicalList, router },
    inject: ['detailParent'],
    data() {
        return {
            modal: false,
            currentTab: 'vm',
            tabList: [
                {
                    name: 'vm',
                    label: '虚拟设备',
                    component: 'environManage',
                },
                {
                    name: 'phy',
                    label: '实物设备',
                    component: 'physicalList',
                },
                {
                    name: 'router',
                    label: '路由设备',
                    component: 'router',
                },
            ],
        };
    },
    methods: {
        changeTab(val) {
            this.currentTab = val;
        }
    },
};
</script>
<style scoped>
.environ-tab /deep/ .ivu-tabs-bar {
    margin-bottom: 0;
    padding: 0;
}
.environ-tab /deep/ .ivu-tabs-tabpane {
    /* padding: 10px 16px; */
}
.environ-tab /deep/ .ivu-tabs-nav .ivu-tabs-tab {
    padding: 11px 16px;
}
</style>
